<template>
	<div class="bg">
		<goback title="更改手机号"></goback>

		<div class="save">
			<button :class="{ 'greenButton': isButtonGreen, 'grayButton': !isButtonGreen }" @click="save">保存</button>
		</div>
		<div class="text">请输入手机号码</div>
		<div style="background-color: white;height: 30vw;padding-top:4vw ;">
			<div class="diqu">
				<div class="diqu-text">国家/地区</div>
				<select v-model="selectedOption" id="selectBox">
					<option v-for="option in options" :key="option.value" :value="option.value">
						{{ option.text }}
					</option>
			 </select>
			</div>
			<div class="sj">
				<div class="sj-text">手机号码</div>
				<div class="input" @input="handleInput">
					<input type="text" v-model="inputText" placeholder="手机号码">
				</div>
			</div>
			
			<div class="confirm">
				<div class="confirm_text">当前密码</div>
				<div class="confirm_password">
					<input type="text" v-model="now_password" placeholder="请输入当前的密码以验证身份">
				</div>
			</div>
			
			
		</div>


	</div>

</template>

<script>
	export default {
		data() {
			return {
				inputText: '',
				isButtonGreen: false,
				inputTimeout: null,
				selectedOption: 'option1', 
				now_password: null,
				options: [   
					{
						text: '中国大陆 +86',
						value: 'option1'
					},
					{
						text: '中国香港 +852',
						value: 'option2'
					},
					{
						text: '中国澳门 +853',
						value: 'option3'
					},
					{
						text: '中国台湾 +886',
						value: 'option4'
					},
					{
						text: '韩国 +82',
						value: 'option5'
					},
					{
						text: '美国 +1',
						value: 'option6'
					},
					{
						text: '加拿大 +1',
						value: 'option7'
					},
					{
						text: '英国 +44',
						value: 'option8'
					},
					{
						text: '澳大利亚 +61',
						value: 'option9'
					},
					{
						text: '新加坡 +65',
						value: 'option10'
					}
				],
			}
		},
		methods: {
			handleInput() {
				console.log(this.inputText)
				if (this.inputText.trim() == '' || this.inputText.length != 11) {
					this.isButtonGreen = false
				} else {
					this.isButtonGreen = true;
				}
			},
			save(){
				
				if(this.isButtonGreen ==false){
					return;
				}
				
				if(this.inputText.length!=11){
					this.$toast.showMessage("手机号格式有误,请检查");
					return;
				}
				
				this.axios.get(`${this.IP}/edittelephone`, {
					params:{
						token: this.getStorage('token'),
						new_telephone: this.inputText,
						now_password: this.now_password,
					}
				}).then(res => {
					let that = this;
						this.$toast.showMessage(res.data);
						that.$router.go(-1);
						setTimeout(function(){
							location.reload();
							
						},1500)
				})
			}

		},
	}
</script>

<style scoped>
	.text {
		margin-left: 4vw;
		margin-top: -4vw;
		margin-bottom: 4vw;
		color: black;
		z-index: 1;
	}

	.save {
		display: flex;
		justify-content: flex-end;
		margin-right: 2vw;
		margin-top: 2vw;
	}

	.greenButton {
		background-color: #06d072;
		color: white;
		padding: 1vw;
		border-radius: 1vw;
	}

	.grayButton {
		background-color: #c6c6c6;
		color: white;
		padding: 1vw;
		border-radius: 1vw;
	}

	.input {
		display: flex;
		justify-content: center;
		margin-top: -4vw;
		margin-left: 2vw;
	}

	input {
		border: none;
		caret-color: #c6c6c6;
		padding-left: 1vw;
		background-color: white;
		width: 70vw;
		margin-left: 5vw;
		

	}

	input:focus {
		outline: none;
		box-shadow: none;
		border-bottom: 1px solid #06b666;
		caret-color: #06b666;
	}

	.sj {

		margin-left: 4vw;
		margin-top: 10vw;

	}

	.sj-text {
		
	
	}

	select {

		border: none;
		caret-color: #c6c6c6;
		padding-left: 1vw;
		background-color: #f1f1f1;
		width: 70vw;
		background-color: white;
		height: 5vw;
		padding-left: 10vw;
	}

	select:focus {
		outline: none;
		box-shadow: none;
	}

	.diqu {
		display: flex;
		justify-content: center;
		margin-top: 4vw;
		margin-left: -7vw;
		
	}
	.confirm{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.confirm_text{
		width: 150px;
		color: #333;
		text-align: center;
	}
	.confirm_input{
		flex:1;
		height: 30px;
	}
</style>
